<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Segment - Colors</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Segment - Colors</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <!-- Default NO COLOR -->
      <ion-segment value="free">
        <ion-segment-button value="paid">
          Paid
        </ion-segment-button>
        <ion-segment-button value="free">
          Free
        </ion-segment-button>
        <ion-segment-button value="top">
          Top
        </ion-segment-button>
      </ion-segment>

      <div class="customize-all">
        <ion-segment value="free">
          <ion-segment-button value="paid">
            Custom
          </ion-segment-button>
          <ion-segment-button value="free">
            Colors
          </ion-segment-button>
          <ion-segment-button value="top">
            All
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="primary" value="reading-list">
          <ion-segment-button value="bookmarks">
            Bookmarks
          </ion-segment-button>
          <ion-segment-button value="reading-list">
            Reading List
          </ion-segment-button>
          <ion-segment-button value="shared-links">
            Shared Links
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="secondary" value="active">
          <ion-segment-button value="active">
            Active
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled="true">
            Disabled
          </ion-segment-button>
          <ion-segment-button value="inactive" disabled="false">
            Inactive
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="tertiary" value="all">
          <ion-segment-button value="all">
            All
          </ion-segment-button>
          <ion-segment-button value="missed">
            Missed
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="success" value="330">
          <ion-segment-button value="330">
            <ion-label>330ml</ion-label>
          </ion-segment-button>
          <ion-segment-button value="440">
            <ion-label>440ml</ion-label>
          </ion-segment-button>
          <ion-segment-button value="500">
            <ion-label>500ml</ion-label>
          </ion-segment-button>
          <ion-segment-button value="custom">
            <ion-icon name="create"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="warning" value="reading-list">
          <ion-segment-button value="bookmarks">
            <ion-icon name="book"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="reading-list">
            <ion-icon name="glasses"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="shared-links">
            <ion-icon name="at"></ion-icon>
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="danger" value="bookmarks">
          <ion-segment-button value="bookmarks">
            <ion-label>Bookmarks</ion-label>
          </ion-segment-button>
          <ion-segment-button value="reading-list">
            <ion-label>Reading List</ion-label>
          </ion-segment-button>
          <ion-segment-button value="shared-links">
            <ion-label>Shared Links</ion-label>
          </ion-segment-button>
        </ion-segment>


        <ion-segment color="light" value="rainy">
          <ion-segment-button value="sunny">
            Sunny
          </ion-segment-button>
          <ion-segment-button value="rainy">
            Rainy
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="medium" value="seg1">
          <ion-segment-button value="seg1">
            <ion-label>Seg 1</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg2">
            <ion-label>Seg 2</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg3">
            <ion-label>Seg 3</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment color="dark" value="seg22">
          <ion-segment-button value="seg21">
            <ion-label>Seg 2 1</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg22">
            <ion-label>Seg 2 2</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg23">
            <ion-label>Seg 2 3</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment disabled color="danger" value="seg22">
          <ion-segment-button value="seg21">
            <ion-label>Seg 2 1</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg22">
            <ion-label>Seg 2 2</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg23">
            <ion-label>Seg 2 3</ion-label>
          </ion-segment-button>
        </ion-segment>

        <ion-segment disabled color="medium" value="seg22">
          <ion-segment-button value="seg21">
            <ion-label>Seg 2 1</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg22">
            <ion-label>Seg 2 2</ion-label>
          </ion-segment-button>
          <ion-segment-button value="seg23">
            <ion-label>Seg 2 3</ion-label>
          </ion-segment-button>
        </ion-segment>
      </div>
    </ion-content>

    <style>
      ion-content ion-segment {
        margin-bottom: 10px;
      }

      .md .customize-all ion-segment-button {
        --color: red;
        --background: rgba(0, 0, 0, 0.2);
        --ripple-color: red;
        --indicator-color: red;
      }

      .ios .customize-all ion-segment {
        --background: rgba(51, 17, 17, 0.15);
      }

      .ios .customize-all ion-segment-button {
        --color: purple;
        --indicator-color: lightpink;
      }

    </style>
  </ion-app>
</body>

</html>
